  <script setup>
  import {useRouter} from "vue-router";
  import {ref} from "vue";
  import myAxios from "../plugins/myAxios.ts";
  import {showFailToast, showSuccessToast} from "vant";

  const router = useRouter();

  const minDate = new Date();

  const initFormData = {
    "name": "",
    "description": "",
    "expireTime": "",
    "maxNum": 0,
    "password": "",
    "status": 0,
  }


  //需要用户填写的表单数据
  const addTeamData = ref({...initFormData})

  //展示日期选择器
  const showPicker = ref(false);
  const onConfirm = () => {
    addTeamData.value.expireTime = currentDate.value.join('-') + "T" + currentTime.value.join(':');
    showPicker.value = false;
  };

  const currentDate = ref(['2023','12','18']);
  const currentTime = ref(['12','00','00']);
  const columnsType = ['hour', 'minute','second'];

  const onSubmit = async () => {
    const postData = {
      ...addTeamData.value,
      status: Number(addTeamData.value.status)
    }
    // todo 前端参数校验
    const res = await myAxios.post("/team/add", addTeamData.value);
    if (res?.code === 0 && res.data) {
      showSuccessToast("添加成功");
      router.push({
        path: '/team',
        replace: true,
      });
    } else {
      showFailToast("添加失败");
    }
  }

  </script>

  <template>
    <div id="teamAddPage">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
              v-model="addTeamData.name"
              name="name"
              label="队伍名"
              placeholder="请输入队伍名"
              :rules="[{ required: true, message: '请填写队伍名' }]"
          />
          <van-field
              v-model="addTeamData.description"
              rows="4"
              autosize
              label="队伍描述"
              type="textarea"
              placeholder="请输入队伍描述"
          />
          <van-field
              is-link
              readonly
              clickable
              name="date-picker"
              :value="addTeamData.expireTime"
              v-model="addTeamData.expireTime"
              label="过期时间"
              :placeholder="'点击选择过期时间'"
              @click="showPicker = true"
          />
          <van-popup v-model:show="showPicker" position="bottom">
            <van-picker-group
                title="设置过期日期"
                :tabs="['选择日期', '选择时间']"
                @confirm="onConfirm"
                @cancel="showPicker=false"
            >
              <van-date-picker
                  v-model="currentDate"
                  :min-date="minDate"
              />
              <van-time-picker v-model="currentTime" :columns-type="columnsType"/>
            </van-picker-group>
          </van-popup>

          <van-field name="stepper" label="最大人数">
            <template #input>
              <van-stepper v-model="addTeamData.maxNum" max="10" min="3"/>
            </template>
          </van-field>
          <van-field name="radio" label="队伍状态">
            <template #input>
              <van-radio-group v-model="addTeamData.status" direction="horizontal">
                <van-radio name="0">公开</van-radio>
                <van-radio name="1">私有</van-radio>
                <van-radio name="2">加密</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field v-if="Number(addTeamData.status)===2"
                     v-model="addTeamData.password"
                     type="password"
                     name="userPassword"
                     label="密码"
                     placeholder="请输入队伍密码"
                     :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </template>

  <style scoped>

  </style>